import {Component, Input, OnInit} from '@angular/core';
import {UtilComponent} from '../../interface/util-component.interface';
import Map from 'ol/Map.js';
import {Tile as TileLayer} from 'ol/layer.js';
import OSM from 'ol/source/OSM.js';
import {DrawFeatureService} from '../draw-feature/draw-feature.service';
import {Vector as VectorSource} from 'ol/source';
import GeoJSON from 'ol/format/GeoJSON';
import {Vector as VectorLayer} from 'ol/layer';
import {NzMessageService} from 'ng-zorro-antd';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';

@Component({
    selector: 'kylin-layer-group',
    templateUrl: './layer-group.component.html',
    styleUrls: ['./layer-group.component.less'],
    providers: [DrawFeatureService]
})
export class LayerGroupComponent implements OnInit, UtilComponent {
    // ---------- 接口实现 begin -------------- //
    hasContent = true;
    map: Map;

    @Input() set data(val) {
        Object.assign(this, val);
    };

    // ---------- 接口实现 end ---------------- //
    tileone;
    LayersListData;
    vectorLayer;
    LayersListDataLayers;
    geojsonObject;
    value2 = 0;
    layerList: any[];
    allStyle: any[];
    constructor(private drawFeatureService: DrawFeatureService,
    private message: NzMessageService) {
    }

    ngOnInit() {
        this.initMap();
        this.allLayers();
    }

    initMap() {
        this.tileone = new TileLayer({
            source: new OSM
        });
        this.map.addLayer(this.tileone);
    }

    allLayers() {
        // 获取图层列表
        this.LayersListData = [];
        this.drawFeatureService.layersList(0, '').then(res => {
            if (res.resp_code === '10000') {
                this.LayersListData = res.data;
                this.appleMap(this.LayersListData) // geojson渲染地图
            } else {
                this.message.create('error', `列表请求失败`);
            }
        }).catch(err => {
            this.message.error('error', err);
        });
    }

    // 数据渲染地图
    appleMap(geoJson) {
        if (geoJson) {
            geoJson.map(data => {
                if (data.layerJson !== '{}') {
                    this.geojsonObject = JSON.parse(data.layerJson);
                    // 获取此图层的样式
                    this.allStyle = [];
                    this.geojsonObject.features.map(i => {
                        this.allStyle.push(i.properties.style) ;
                    });
                    this.forLayer(this.geojsonObject);
                }
            })
        }
    }
    // 数据渲染地图
    forLayer(geojsonObject) {
        return new Promise((resolve) => {
            const vectorSource = new VectorSource({
                features: (new GeoJSON()).readFeatures(geojsonObject),
                wrapX: false
            });
            vectorSource.getFeatures().map((data, i) => {
                data.setStyle(new Style({
                    fill: new Fill({
                        color: this.allStyle[i]
                    }),
                    stroke: new Stroke({
                        color: this.allStyle[i],
                        width: 2
                    }),
                    image: new CircleStyle({
                        radius: 7,
                        fill: new Fill({
                            color: this.allStyle[i]
                        })
                    })
                }))
            });
            this.vectorLayer = new VectorLayer({
                source: vectorSource,
            });
            this.map.addLayer(this.vectorLayer);
            resolve(this.map)
        }).then(data => {
            // get地图所有的点线面（业务图层）
            this.LayersListDataLayers = this.map.getLayers().getArray().slice(1);
            this.getLayersEachData(this.LayersListDataLayers)
        })
    }

    getLayersEachData(layerGroup) {
        if (layerGroup) {
            this.layerList = [];
            layerGroup.forEach((layer, i) => {
                this.bindInputs('layer' + i, layer);
            });
        }
    }

    bindInputs(layerid, layer) {
        const layerOb: any = {};
        layerOb.id = layerid;
        layerOb.layers = layer;
        layerOb.visible = layer.getVisible();
        layerOb.opacity = layer.getOpacity();
        this.layerList.push(layerOb);
    }

    visibilityChange(layer, e) {
        layer.setVisible(e);
    }

    opacityModelChange(layer, e) {
        layer.setOpacity(parseFloat(e));
    }

    cancel(options?: any): any {
        this.map.getLayers().getArray().slice(1).map(data => {
            this.map.removeLayer(data);
        })
    }

}
